<script setup lang="ts">
import { ref } from 'vue';

const foods = ref(['烤肉', '小炒肉', '饺子', '拌面'])

const obj = ref({
  name: '张三',
  age: 18
})
</script>


<template>
  <div>
    <!-- 列表渲染 -->
    <p v-for="(item, index) in foods" :key="item">
      {{ index + 1 }} {{ item }}
    </p>

    <!-- 
       ul 无序列表，前面有装饰小圆点
       ol 有序列表，前面有数字序号

       :key="item"  作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。
    -->
    <ol>
      <!-- 如果 index 用不上，可以省略不写 -->
      <li v-for="item in foods" :key="item">
        {{ item }}
      </li>
    </ol>

    <ol>
      <!-- 通过 Array.from({ length: 5 }) 生成固定长度的数组，用于生成指定数量的测试结构 -->
      <li v-for="item in Array.from({ length: 5 })">测试结构</li>
    </ol>

    <ol>
      <!-- 循环数字，可以快速生成指定数量的测试结构，比 Array.from({ length: 5 }) 方便 -->
      <li v-for="item in 5">测试结构</li>
    </ol>

    <ul>
      <!-- 支持对象循环遍历，遍历对象的键值对，了解即可 -->
      <li v-for="(value, key, index) in obj">
        {{ index }} {{ key }} : {{ value }}
      </li>
    </ul>
  </div>
</template>
